<template>
    <Chart :option="option" v-bind="$attrs"></Chart>
</template>

<script>
import { getChartData } from "@/api/echarts";
import Chart from "@/components/chart/chart.vue";

export default {
    name: 'costAnalysis',
    components: { Chart },
    props: [],
    data() {
        return {
            option: {},
            chartData: []
        };
    },
    mounted() {
        getChartData(
            { "custom_chart_id": "41" }
        ).then(res => {
            this.chartData = res.data.data;
            this.setOption();
        });
    },
    methods: {
        setOption() {
            this.option = {
                animation: true, // 开启动画
                animationDuration: 3000, // 动画时长为5秒
                // animationEasing: 'bounceOut', // 缓动动画为bounceOut
                // animationThreshold: 7, // 动画阈值为7
                dataset: [
                    {
                        dimensions: ['customer_area_id_name', 'total_freight', 'total_cost',],
                        source: this.chartData
                    },
                ],
                boundaryGap: false,
                legend: {
                    data: ["收入", "成本"],
                },
                grid: {
                    left: "3%",
                    right: "32px",
                    bottom: "3%",
                    containLabel: true,
                },
                xAxis: {
                    type: 'category',
                    axisLabel: {
                        interval: 0,
                        rotate: 30
                    }
                    // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: "收入",
                        // data: [120, 200, 150, 80, 70, 110, 130],
                        type: 'bar',
                        // smooth: true,
                        label: {
                            show: true,
                            position: "top"
                        },
                        // itemStyle: {
                        //     color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        //         {
                        //             offset: 0,
                        //             color: 'rgb(152, 200, 249)'
                        //         },
                        //         {
                        //             offset: 1,
                        //             color: 'rgb(64, 158, 255)'
                        //         }
                        //     ])
                        // },
                    },
                    {
                        name: "成本",
                        // data: [120, 200, 150, 80, 70, 110, 130],
                        type: 'bar',
                        label: {
                            show: true,
                            position: "top"
                        },
                        itemStyle: {
                            normal: {
                                // color: function (params) {
                                //     var colorList = [
                                //         "#5470c6",
                                //         "#91cc75",
                                //         "#fac858",
                                //         "#ee6666",
                                //         "#73c0de",
                                //         "#3ba272",
                                //         "#fc8452",
                                //         "#9a60b4",
                                //         "#ea7ccc",
                                //     ];
                                //     return colorList[params.dataIndex % colorList.length];
                                // },
                            },
                        },

                    },

                ]
            };
        },
    },
};
</script>
<style lang="scss" scoped>
.wrapper {}
</style>